@import "../../../styles/variable";

.main-empty {
  display: flex;
  flex-direction: column;

  .header {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon {
      width: 204px;
      height: 204px;
      margin-top: 50px;
    }
    .title {
      margin-top: 50px;
      font-size: @font32;
      color: @color333;
      line-height: 42px;
      margin-bottom: 80px;
    }
  }

  .content {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .section-header {
      height: 106px;
      width: 100%;
      display: flex;
      flex-direction: row;
    }
    .title {
      flex: 1;
      margin-left: 30px;
      margin-top: 40px;
      font-size: @font32;
      color: @color333;
      line-height: 36px;
    }
    .right {
      display: flex;
      height: 100%;
      flex-direction: row;
      align-items: center;

      .item {
        margin-top: 20px;
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        .item-title {
          font-size: @font28;
          color: @color666;
          font-family: @fontFamilyLight;
          line-height: 40px;
          margin-left: 30px;
        }
        .item-icon-content {
          height: 40px;
          display: flex;
          flex-direction: row;
          align-items: center;
          .ic-next {
            width: 26px;
            height: 26px;
            margin-right: 24px;
            line-height: 40px;
          }
        }

      }
    }

    .empty-list {
      margin-left: 30px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .empty-cell {
        margin-right: 20px;
        margin-bottom: 20px;
      }
    }
  }
}

.section {
  display: flex;
  flex-direction: column;
  &.section-invalid {
    .cell-item {
      margin-bottom: 0;
      .cell-price {
        color: @color666 !important;
      }
    }
    .invalid-header {
      height: 76px;
      width: 100%;
      display: flex;
      flex-direction: row;
      background-color: @colorWhite;
      justify-content: space-between;
      font-family: @fontFamilyLight;
      .header-title {
        margin-left: 30px;
        margin-top: 30px;
        line-height: 36px;
        color: @color666;
        font-size: @font26;
      }
      .header-btn {
        height: 100%;
        display: flex;
        flex-direction: column;
        font-size: @font26;
        color: @color333;
        .header-btn__title {
          margin-left: 30px;
          margin-right: 30px;
          margin-top: 30px;
          line-height: 36px;
        }
      }
    }
  }
  .cell-item {
    background-color: @colorWhite;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    .cell-item__delete {
      background-color: @colorFF3B3B;
      color: @colorWhite;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: @font30;
    }
    .sku-tips__content {
      width: 100%;
      display: flex;
      flex-direction: row;
      .left {
        width: 106px;
        height: 100%;
      }
      .right {
        width: 614px;
        .sku-tips_inner {
          margin-bottom: 30px;
          width: 100%;
          display: flex;
          flex-direction: row;
          background-color: @colorBg;
          border-radius: 4px;
          .sku-tips_title {
            flex: 1;
            margin: 12px 20px;
            font-size: @font26;
            color: @color666;
            font-family: @fontFamilyLight;
          }
        }
      }
    }
    .cell-content {
      width: 100%;
      height: 100%;
      background-color: @colorWhite;
      display: flex;
      flex-direction: row;
      align-items: center;

      .cell-left {
        height: 100%;
        width: 106px;
        display: flex;
        align-items: center;
        justify-content: center;
        .select-icon {
          width: 42px;
          height: 42px;
        }
        .cell-left__title {
          font-size: @font26;
          color: @colorD0021B;
          line-height: 36px;
          font-family: @fontFamilyLight;
        }
        .cell-left__invalid-title {
          width: 72px;
          height: 42px;
          background-color: @color999;
          display: flex;
          align-items: center;
          justify-content: center;
          color: @colorWhite;
          font-size: @font26;
          font-family: @fontFamilyLight;
          line-height: 42px;
        }
      }

      .cell-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;

        .cell-img {
          width: 140px;
          height: 140px;
          position: relative;
          box-sizing: border-box;
          &:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 200%;
            height: 200%;
            box-sizing: border-box;
            border: 1PX solid @colorE5E5E5;
            transform: scale(0.5);
            transform-origin: 0 0;
          }
        }
        .cell-i_right {
          margin-left: 20px;
          margin-right: 30px;
          flex: 1;
          display: flex;
          flex-direction: column;

          .cell-title {
            font-size: @font28;
            color: @color666;
            line-height: 46px;
            height: 46px;
            .line(1);
            max-width: 454px;
          }
          .cell-i_bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            .cell-ib_left {
              display: flex;
              flex-direction: column;

              .cell-price {
                font-size: @font28;
                color: @colorD0021B;
                line-height: 42px;
                margin-top: 26px;
              }
              .cell-ib_bottom {
                display: flex;
                flex-direction: row;
                align-items: center;
                height: 42px;
                .cell-ibb_item {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  font-size: @font24;
                  color: @color999;
                  line-height: 36px;
                  &:first-child {
                    margin-right: 20px;
                  }
                  .tips {
                    color: @color666;
                  }
                }
              }
            }
            .cell-ib_right {
              width: 136px;
              height: 48px;
              line-height: 46px;
              font-size: @font26;
              color: @color934900;
              font-family: @fontFamilyLight;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              box-sizing: border-box;
              &:before {
                content: " ";
                position: absolute;
                left: 0;
                top: 0;
                width: 200%;
                height: 200%;
                box-sizing: border-box;
                border: 1PX solid @color934900;
                transform: scale(0.5);
                transform-origin: 0 0;
              }
            }
          }
        }
      }
    }
  }
}

.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 3000;
  background-color: @colorWhite;
  display: flex;
  flex-direction: row;
  align-items: center;

  .check-btn {
    height: 100%;
    width: 164px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      width: 42px;
      height: 42px;
      margin-right: 10px;
    }
    .title {
      font-size: @font26;
      color: @color666;
      line-height: 42px;
    }
  }
  .center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 20px;

    .center-top {
      display: flex;
      flex-direction: row;
      align-items: center;
      line-height: 42px;
      .tips {
        font-size: @font26;
        color: @color333;
        font-family: @fontFamilyLight;
      }
      .price {
        font-size: @font32;
        color: @colorD0021B;
      }
    }
    .center-bottom {
      font-size: @font26;
      color: @color666;
      line-height: 36px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .cb-item {
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .submit-btn {
    width: 200px !important;
  }
}
